<template>
  <div>
    <el-form ref="loginForm" :rules="rules"
             v-loading="loading"
             element-loading-text="正在登陆..."
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)"
             :model="loginForm" class="loginContainer"
             >
      <h3 class="loginTitle">员工管理系统</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username"
                  placeholder="请输入用户名" auto-complete="false"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password"
                  placeholder="请输入密码" auto-complete="false"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input type="text" v-model="loginForm.code"
                  placeholder="点击图片更换验证码" auto-complete="false"
                  class="loginCaptcha"></el-input>
        <img :src="captchaUrl" @click="updateCaptcha">
      </el-form-item>
      <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
      <!--防止登录按钮点击两次才能进入home页面的解决方案，将模板上绑定的按钮提交点击事件，绑定在 [type="submit"] 父节点上-->
      <el-button @click="submitLogin"
                 type="primary"
                 class="loginButton">登录</el-button>
    </el-form>
  </div>
</template>

<script>
  import {Tool} from "../utils/tool";

  export default {
    name: "Login",
    data() {
      return {
        //  加Date(),为了防止点击更换验证码图片时返回的还是一样的图片
        captchaUrl: '',
        loginForm: {
          username: 'admin',
          password: '123',
          code: ''
        },
        loginFormTemp: {
          username: '',
          password: '',
          code: '',
          codeToken: ''
        },
        codeToken: '',
        checked: true,
        loading: false,
        rules: {
          //  在组件上以prop属性进行绑定
          username: [
              { required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur'}
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur'}
          ],
        }
      }
    },
    mounted() {
      this.updateCaptcha()
    },
    methods: {
      submitLogin() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            //  设置正在加载
            this.loading = true
            this.loginForm.codeToken = this.codeToken

            this.postRequest('/login', this.loginForm).then(resp => {
              if (resp) {
                //  取消正在加载
                this.loading = false

                //  存储用户token
                const tokenStr = resp.obj.tokenHead + ' ' + resp.obj.token
                //  将token存在sessionStorage
                window.sessionStorage.setItem('tokenStr', tokenStr)
                //  页面跳转,先查询是否有重定向
                let path = this.$route.query.redirect
                this.$router.push((path === '/' || path === undefined)
                    ? '/home'
                    : path).catch(err => { console.log(err) })
              } else {
                this.loading = false
                this.updateCaptcha()
              }
            })
          } else {
            this.$message.error('请输入所有字段！！')
            return false
          }
        })
      },
      updateCaptcha() {
        this.codeToken = Tool.uuid(8)
        this.captchaUrl = process.env.VUE_APP_SERVER + '/captcha?codeToken=' + this.codeToken
      }
    }
  }
</script>

<style>

  .loginContainer {
    width: 350px;
    margin: 180px auto;
    border: 1px solid #fff;
    border-radius: 15px;
    box-shadow: 0px 0px 25px #cac6c6;
    padding: 15px 35px 15px 35px;
    background: #fff;
    background-clip: padding-box;
  }
  .loginTitle {
    margin: 10px auto 30px auto;
    text-align: center;
  }
  .loginButton {
    width: 100%;
    margin-bottom: 20px;
  }
  .loginCaptcha {
    width: 250px;
    margin-right: 5px;
  }
  .loginRemember {
    text-align: left;
    margin: 0px 0px 15px 0px;
  }

  .el-form-item__content {
    display: flex;
    align-items: center;
  }

</style>